"use client"

import * as React from "react"
import { VSCodeSidebar } from "./components/vscode-sidebar"
import { sampleFileData } from "./data/sample-files"
import type { FileNode } from "./types/file-tree"

export default function VSCodeExplorer() {
  const [selectedFile, setSelectedFile] = React.useState<FileNode | null>(null)

  const handleFileSelect = (file: FileNode) => {
    setSelectedFile(file)
    console.log("Selected file:", file.name)
  }

  return (
    <div className="flex h-screen w-full bg-background">
      <VSCodeSidebar fileData={sampleFileData} onFileSelect={handleFileSelect} />

      {/* Main content area */}
      <div className="flex-1 flex flex-col">
        {/* Tab bar */}
        <div className="h-9 bg-muted/30 border-b border-border flex items-center px-3">
          {selectedFile && (
            <div className="flex items-center gap-2 text-sm">
              <span className="text-muted-foreground">Selected:</span>
              <span className="font-medium">{selectedFile.name}</span>
            </div>
          )}
        </div>

        {/* Editor area */}
        <div className="flex-1 p-6 bg-muted/10">
          {selectedFile ? (
            <div className="space-y-4">
              <h2 className="text-2xl font-bold">File: {selectedFile.name}</h2>
              <div className="p-4 bg-muted/50 rounded-lg border">
                <p className="text-muted-foreground">File content would be displayed here...</p>
                <p className="text-sm text-muted-foreground mt-2">Type: {selectedFile.type}</p>
              </div>
            </div>
          ) : (
            <div className="flex items-center justify-center h-full text-muted-foreground">
              <div className="text-center">
                <h3 className="text-lg font-medium mb-2">Welcome to VSCode Explorer</h3>
                <p>Select a file from the sidebar to view its content</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
